<template>
  <div class="view-wrapper">
    <div class="main_top">
      <div class="lef">
        <div class="" v-for="item in typeList" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
          :value="item.id" @click="handleTab(item.id)">
          {{ item.value }} 
        </div>
      </div>
    </div>
    <div class="table"> 
      <dyIndex v-if="currentNavtab == 1" :phone="phone"></dyIndex>
      <dyIntegral v-if="currentNavtab == 2" :phone="phone"></dyIntegral>
      <integralTool v-if="currentNavtab == 3"></integralTool>
      <travelCheckIn v-if="currentNavtab == 4"></travelCheckIn>
    </div>
  </div>
</template>
<script>
import dyIndex from "./components/dyIndex";  
import dyIntegral from "./components/dyIntegral"; 
import integralTool from "./components/integralTool"
import travelCheckIn from "./components/travelCheckIn"
export default {
  name: "shopDetail",
  components: {
    dyIndex,
    dyIntegral,
    integralTool,
    travelCheckIn
  },
  props: {},
  data() {
    return {
      currentNavtab: 2,
      typeList: [
        {id: 1,value: '首页'},
        {id: 2,value: '积分任务'},
        {id: 3,value: '积分工具首页'},
        {id: 4,value: '旅游打卡首页'},
      ],
      phone: '',
    };
  },
  watch: {},
  created() {
   
  },
  mounted() { },
  methods: {
    //切换选项
    handleTab(id) {
      this.currentNavtab = id
      // this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}

.main_top{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    padding: 20px 0;
    cursor: pointer;
    .lef{
        display: flex;
        justify-content: flex-start;
        border: 1px solid #dfe6ec;
        .list{
            height: 40px;
            text-align: center;
            line-height: 40px;
            width: 140px;
            text-align: center;
            border-right: 1px solid #dfe6ec;
            background: #fff;
        }
        .list:nth-last-child(1){
            border: none;
        }
        .active{
            background: #1890ff;
            color: #fff;
        }
    }
}
</style>
  